---
title: Animation Styles
description:
  Learn how to use animation styles to define reusable motion properties.
---

## Overview

Animation styles allow you to define reusable animation properties. The goal is
to reduce the amount of code needed to animate components.

The supported animation styles are:

- **Animation**: animation composition, delay, direction, duration, fill mode,
  iteration count, name, play state, timing function

- **Animation range**: animation range, start, end, timeline

- **Transform origin**: transform origin

## Defining animation styles

Animation styles are defined using the `defineAnimationStyles` function.

Here's an example of an animation style:

```js
import { defineAnimationStyles } from "@chakra-ui/react"

const animationStyles = defineAnimationStyles({
  bounceFadeIn: {
    value: {
      animationName: "bounce, fade-in",
      animationDuration: "1s",
      animationTimingFunction: "ease-in-out",
      animationIterationCount: "infinite",
    },
  },
})
```

## Built-in animation styles

Chakra UI provides a set of built-in animation styles that you can use.

<ExamplePreview name="tokens/animation-style" />

## Update the theme

To use the animation styles, update the `theme` object with the
`animationStyles` property.

```js filename="theme.ts"
import { createSystem, defineConfig } from "@chakra-ui/react"
import { animationStyles } from "./animation-styles"

const config = defineConfig({
  theme: {
    extend: {
      animationStyles,
    },
  },
})

export default createSystem(defaultConfig, config)
```

After updating the theme, run this command to generate the animations.

```bash
npx @chakra-ui/cli@next typegen
```

These animation styles can be composed with other styles like `_open` and
`_closed` which map to the `data-state=open|closed` attribute.

```jsx
<Box
  data-state="open"
  animationDuration="slow"
  animationStyle={{ _open: "slide-fade-in", _closed: "slide-fade-out" }}
>
  > This content will fade in
</Box>
```
